<template>
  <nav class="tab-nav__base">
    <div class="tab-div__item" @click="clickChangeIndex(0)">商品</div>
    <div class="tab-div__item" @click="clickChangeIndex(1)">评价</div>
    <div class="tab-div__item" @click="clickChangeIndex(2)">商家</div>
  </nav>
</template>

<script lang="ts">
import { defineComponent } from "@vue/composition-api";
// 点击触发切换内容函数
function clickChangeIndex(this: Vue, index: number) {
  //   console.log(index, this);
  this.$emit("changeContent", index);
}
export default defineComponent({
  setup() {
    return {
      clickChangeIndex,
    };
  },
});
</script>

<style lang="stylus" scoped>
$font-size = 14px;
$font-active-color = rgb(240, 20, 20);
$font-default-color = rgb(77, 85, 93);
$line-color = rgba(7, 17, 27, 0.1);

@import '../../common/style/mixin.styl';

.tab-nav__base {
  color: $font-default-color;
  font-size: $font-size;
  display: flex;
  justify-content: space-around;
  align-items: center;
  border-1px(rgba(7, 17, 27, 0.1), 2, 0.5);

  .tab-div__item {
    height: 40px;
    line-height: 40px;
    flex-grow: 1;

    &:hover {
      color: $font-active-color;
    }
  }
}
</style>
